<template>
  <div id="app" class='app' v-loading="loading">
      
      <router-view/>
      <div id="main">
        <form id="login" name="login" method="post" action="#" enctype='application/json' v-on:submit="login()">
            <div class='logo'>
                <img src='../assets/logo.png' style='width:100px'/>
            </div>
            <div class='logoText'>
                <span>{{title}}</span>
            </div>
            <div class='account'>
              
                <el-input type="text" id="account" name="account" v-model="account" placeholder="账号" autocomplete="off" autofocus required oninvalid="setCustomValidity('用户名不能为空，请输入')" oninput="setCustomValidity('')" prefix-icon="el-icon-s-custom" style='width:330px'></el-input>
            </div>
            <div class='password' style='margin-top:10px'>
               
                <el-input type="password" id="password" name="password" v-model="password" placeholder="密码" autocomplete="off" required oninvalid="setCustomValidity('密码不能为空，请输入')" oninput="setCustomValidity('')" prefix-icon="el-icon-lock" style='width:330px'></el-input>
            </div>
            <div class="errormsg">
            </div>
            <button type="submit" class="submit" form="login" >登陆</button>
        </form>
        
        <div class='loading hidden' id="loading">
            <div class="loadingt">
                 <div class='loadingimg'></div>
            </div>
           
        </div>
         
      </div>

  </div>
  
        
</template>
<script>
import Vue  from 'vue'
import '../assets/css/common.css'
import getUserIP from '../utils/utils'
export default {
  name: 'Home',
  components: {
   
  },
  data(){
      return {
         ipsssss:'',
         isLocalhost:'N',
         account:'',
         password:'',
         loading:true,
         title:localStorage.getItem("title")
      }
  },
  beforeCreate(){
      
  },
  mounted(){
    
  },
  created(){
    if(this.$route.query.isLocalhost){
        this.isLocalhost=this.$route.query.isLocalhost;
    }
    if(this.$route.query.exurl){
        let exurl=this.$route.query.exurl;
        this.$router.push({path:exurl});
    }
    if(this.$route.query.title){
        localStorage.setItem("title",this.$route.query.title);
        this.title=this.$route.query.title;
    }else{
        this.title=localStorage.getItem("company");
    }
    document.title=this.title; 
    
  },
  mounted(){
      this.loading=false;
  },
  methods:{
    login(){
        this.loading=true;
        let sef=this;
       var loading=document.getElementById("loading");
       var loadings=window.setTimeout(function(){
          loading.className="loading show";
       },500);
      
       event.preventDefault() //阻止form表单默认提交
       /* if(this.isLocalhost=='Y'){
            localStorage.setItem("bygip","http://localhost:10006/");
            localStorage.setItem("cemeteryip","http://localhost:10007/");
        }else{
            //localStorage.setItem("ip","http://114.55.141.24:10018/");
            localStorage.setItem("api","http://localhost:10005/")
        }
        localStorage.setItem("apiip","http://8.136.193.200:8888/")*/
        localStorage.setItem("imgIp","http://jsweixin.tianxunwang.com");
        
        this.$post('api','api/login/checkLogin',
          {
              account:escape(this.account),
              password:escape(this.password)
          }
         //   headers:
//            {'Content-Type': 'application/json' }

        ).then(data=>{
            let ips=data[0].ip;
            data=data[0].data;
            localStorage.setItem("ips",JSON.stringify(ips));
            console.log("ips====="+ips);
            this.loading=false;
            if(data[0].status=="err"){
                 document.getElementsByClassName("errormsg")[0].innerHTML=unescape(data[0].msg+"！")
            }else{
                let token=data[0].token;
                let company=data[0].company;
                let username=data[0].username;
                let userId=data[0].userId;
                let name=data[0].name;
                let url=data[0].url;
                sessionStorage.setItem("token",token);
                localStorage.setItem("company",company);
                localStorage.setItem("username",username);
                localStorage.setItem("userId",userId);
                this.$router.push({path:url,query:{title:name}});
            }
            window.clearTimeout(loadings)
            loading.className="loading hidden"; 
        });
    }

  }
}
</script>
<style scoped>
    .app{
        height:100%;
        width:100%;
        background:url('../assets/login/bg5.jpg') no-repeat;
        background-size: 100% 100%;
        display:flex;
        flex-direction: column;
    }
    #main{
        width:100%;
        height:100%;
        text-align:center;
        flex:1;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }
    form{
        width:40%;
        margin-left:30%;
        text-align:center;
       /* border:1px solid #ddd;
        background:#fff;*/
        border-radius: 5px;
        height:54%;
       /* box-shadow:1px 1px 2px #000;*/
    }
    .logoText{
        height:50px;
       /* background:#fafafa;*/
        line-height:50px;
      /*  border-bottom:1px solid #ddd;
        color:#8e8c8c;*/
        color:#fff;
        margin-bottom:20px;
        font-size:22px;
       
    }
    .logoText span{
        text-shadow: 1px 2px 2px #000;

    }
    input{
        height:20px;
        width:260px;
        margin:10px;
        padding:10px;
        border-radius: 5px;
        border:1px solid #ddd;
        margin-left:-2px;
        border-left:0;

    }
    .submit{
        width:180px;
        height:50px;
        margin-top:20px;
        background: cornflowerblue;
        border:1px solid cornflowerblue;
        border-radius: 5px;
        color:#fff;
        box-shadow:1px 1px 2px cornflowerblue;
        font-size:18px;
        cursor:pointer;
    }
    .submit:hover{
        background:rgb(112, 155, 236);
    }
    i{
        border:1px solid #ddd;
        padding-top:11px;
        padding-bottom:13px;
        border-right:0;
        padding-left:10px;
        padding-right:10px;
    }
</style>